<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>hoyo</title>

    <!-- Bootstrap -->
    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
    <link href="/hoyo/css/mine.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    	a:hover{
    		text-decoration: none !important;
    		color:#00a1d6 !important;
    	}
    	*{
    		font-family: "Microsoft YaHei";
    	}
    	.data-md-5{
    		width:20%;
    		padding-bottom: 15px;
    	}
    	.data-icon{
    		width: 30px;
    		height: 40px;
    	}
    	.data-font{
    		font-size: 15px;
    		line-height: 50px;
    		height: 50px;
    	}
    	.data-channel-header{
    		height: 50px;
    		margin-bottom: 10px;
    	}
    	.padding-zero{
    		padding: 0;
    	}
    	.data-channel-ranking-header{
    		height: 50px;
    		margin-bottom: 10px;
    	}
    	.data-ranking-nav{
    		list-style: none;
    		padding: 0;
    	}
    	.data-ranking-nav li{
    		list-style: none;
    		display: block;
    		margin-top: 15px;
    	}
    	.data-channel-ranking-content{
    		padding: 0;
    		font-size: 14px;
    	}
    	.data-channel-ranking-header{
    		padding: 0;
    	}
    	.data-ranking-nav li:first-child{
				margin-top: 0px;
    	}
    	.data-ranking-badge{
    		border-radius: 5px;
    		float: left;
    		margin-right: 5px;
    	}
    	.data-ranking-badge-active{
    		background-color: #f25d8e;
    	}
    	.data-ranking-a{
    		display: inline-block;
    		overflow: hidden;
    		color:#222;
    	}
    	.ranking-second{
    		height: 20px;
    	}
    	.data-channel{
    		margin-bottom:20px;
    	}
    	.container{
    		padding: 0;
    	}
    	.title{
    		overflow: hidden;
    		padding-left: 3px;
    		margin-top: 8px;
    		margin-bottom: 8px;
    		font-size: 12px;
    	}
    	.play-number .icon{
			width: 14px; 
   			height: 14px; 
    	}
    	.play-number{
    		display: inline-block;
    		height: 14px;
    		width:75px;
    	}
    	.info{
    		height: 14px;
    		font-size: 12px;
    	}
    	.play-number .font{
    		padding-left: 3px;
    		line-height: 14px;
    		height: 14px;
    	}
    	.comment-number .icon{
			width: 14px; 
   			height: 14px; 
    	}
    	.comment-number{
    		display: inline-block;
    		height: 14px;
    		width:70px;
    	}
    	.comment-number .font{
    		padding-left: 3px;
    		line-height: 14px;
    		height: 14px;
    	}
    	.img-rounded{
    		display: inline-block;
		    width: 150px;
		    height: 93px;
		    line-height: 1.42857143;
		    background-color: #fff;
		    -webkit-transition: all .2s ease-in-out;
		    -o-transition: all .2s ease-in-out;
		    transition: all .2s ease-in-out;
    	}
    	.btn-sm{
    		padding:1px 13px;
    	}
    	
    	.data-ranking-second{
    		width: 145px;
    		overflow: hidden;
    		float: right;
    		padding-left: 5px;
    		color:#222;
    	}
    	.data-ranking-second-scole{
    		font-size: 12px;
    		padding-top: 4px;
    		color:#99a2aa;
    	}
    	.data-ranking-second-title{
    		display:block;
    		height: 40px; 
    		overflow: hidden;
    		color:#222;
    	}
    	 .mtitle{
	      	height: 30px;
	      	padding-right:5px;
	      	line-height: 15px;
	      	text-decoration: none;
	      	display: block;
	      	overflow: hidden;
	      	margin-top: 6px;
	      	font-size: 12px;
	      	font-family: "微软雅黑";
	      }
    </style>
  </head>
  <body>
	  <!--
	    	作者：913092806@qq.com
	    	时间：2017-05-06
	    	描述：导航栏开始
	   -->
      		
		<div id="data-nav" class="navbar">
	  	<div class="data-fluid"></div>
	  	<div class="data-nav"></div>
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li th:if="${session.userInfo!=null}">
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/login">
	      			<span>登录</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/register" style="padding-right:84px;">
	      			<span>注册</span>
	      		</a>
	      	</li>
	      	
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
      
	  <!-- 导航栏结束 -->
	  
	  <!--
      	作者：913092806@qq.com
      	时间：2017-05-07
      	描述：频道选择栏
      -->
	  <div id="data-channel-type" class="container">
	  	<div class="row navbar">
	  		<ul class="data-channel-type nav navbar-nav">
	  			<li>
	  				<a href="/hoyo/">
	  					<svg class="icon" aria-hidden="true">
	  						<use xlink:href="#icon-shouye_shouye"></use>
	  					</svg>
	  						<span class="data-right icon-font">首页</span>
	  				</a>
	  			</li>
	  			<li th:each="channel : ${channels}"><a th:href="'/hoyo/channel/'+ ${channel.id}"><span class="icon-font" th:text="${channel.channelName}"></span><span class="badge" th:text="${channel.movieCount}">42</span></a></li>
	  		</ul>
	  	</div>
	  </div>
	  
	  <div class="container" th:each="channel : ${channels}">
	  	<div class="data-channel row">
			<div class="col-lg-9 padding-zero">
				<div class="data-channel-header col-lg-12">
					<div class="data-left" style="margin-top: 5px;margin-right: 5px;">
						<svg class="data-icon icon" aria-hidden="true">
						  <use xlink:href="#icon-shipin2"></use>
						</svg>
					</div>
						<span class="data-font" th:text="${channel.channelName}">动漫</span>
						<span class="data-right" style="margin-top: 15px;">
							<a class="btn btn-default btn-sm" th:href="'/hoyo/channel/'+${channel.id}">
								更多<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
							</a>
						</span>
				</div>
				<div class="data-channel-content" th:each="catalog : ${channel.top10Catalogs}">
					<div class="col-lg-2 data-md-5">
						<div class="data-channel-content-img">
							<a th:href="'/hoyo/catalog/'+${catalog.id}"><img th:src="${catalog.catalogPoster}"  class="img-rounded"></a>
						</div>
						<div class="data-channel-content-info">
							<div class="title"><a th:href="'/hoyo/catalog/'+${catalog.id}" th:text="${catalog.catalogName}" class="mtitle"></a></div>
							<div class="info">
								<div class="play-number">
									<div class="data-left">
										<svg class="icon" aria-hidden="true">
	  									<use xlink:href="#icon-shipin4"></use>
										</svg>
									</div>
									<span class="font" th:text="${catalog.playAmount}">300</span>
								</div>
								<div class="comment-number">
									<div class="data-left">
										<svg class="icon" aria-hidden="true">
	  									<use xlink:href="#icon-pinglun"></use>
										</svg>
									</div>
									<span class="font" th:text="${catalog.amount}">23</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="data-channel-ranking col-lg-3">
				<div class="data-channel-ranking-header col-lg-12">
					<span class="data-font">排行</span>
				</div>
				<div class="data-channel-ranking-content col-lg-12">
					<ul class="data-ranking-nav" th:each="catalog,stat : ${channel.top7Catalogs}">
						<li th:if="${stat.first}">
							<span class="data-ranking-badge badge data-ranking-badge-active" th:text="${stat.count}">1</span>		
								<div style="width: 230px;display: inline-block;">
									<a class="data-ranking-a" style="height: 60px;" th:href="'/hoyo/catalog/'+${catalog.id}">
										<div style="display: inline-block;">
											<img th:src="${catalog.catalogPoster}" width="80px" height="60px" />
										</div>
										
										<div class="data-ranking-second">
											<span class="data-ranking-second-title" th:text="${catalog.catalogName}">震惊！原来标题党都是这样起标题的起标题的起标题的</span>
											<span class="data-ranking-second-scole"  th:text="'综合评分:'+${catalog.playAmount}">综合评分:131</span>
										</div>
									</a>						
								</div>			
						</li>
						<li th:unless="${stat.first}">
							<span class="data-ranking-badge badge data-ranking-badge-active" th:text="${stat.count}">2</span>		
								<div style="width: 230px;display: inline-block;">
									<a class="data-ranking-a ranking-second" th:text="${catalog.catalogName}" th:href="'/hoyo/catalog/'+${catalog.id}">震惊！原来标题党都是这样起标题的起标题的起标题的</a>						
								</div>			
						</li>
					</ul>
					<a class="btn btn-default form-control" th:href="'/hoyo/channel/'+${channel.id}+'?sortType=2' ">查看更多</a>
				</div>
			</div>
		</div>
	  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
  </body>
</html>